<template>
  <div>
    <el-main>
      <el-form
        ref="searchForm"
        size="small"
        :model="searchModel"
        :inline="true"
        @keyup.enter.native="search"
      >
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="订单编号">
              <el-input
                placeholder="请输入订单编号"
                v-model="searchModel.orderNo"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="订单金额从">
              <el-input
                placeholder="请输入最低订单金额"
                v-model="searchModel.moneyStart"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="到">
              <el-input
                placeholder="请输入最高订单金额"
                v-model="searchModel.moneyEnd"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="searchModel.createTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始创建时间"
                end-placeholder="结束创建时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button icon="el-icon-refresh" size="small" @click="resetSearch"
            >重置
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
            >搜索
            </el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="table"
        :data="tableData.records"
        :border="true"
        style="width: 100%"
        size="small"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="orderNo"
          label="订单编号"
          sortable="custom"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="money"
          label="订单金额"
          sortable="custom"
          :formatter="moneyFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          sortable="custom"
          :formatter="statusFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          sortable="custom"
          :formatter="datetimeFormatter"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-view" @click="handleView(row)">详情</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-delete" @click="handleDelete(row)" v-if="row.status==3">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="tableData.total > 0"
          :total="tableData.total"
          :page.sync="tableData.current"
          :limit.sync="tableData.size"
          @pagination="search"
        />
      </div>
      <el-footer>
        <el-button
          icon="el-icon-close"
          size="small"
          @click="$router.go(-1)"
        >取消</el-button
        >
      </el-footer>
    </el-main>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.vue";
import {ApiError} from "@/utils/errors";
import { Status } from "@/utils/constant/orderStatus";
import {
  pageOrder,deleteOrder
} from "@/api/order/order";
import { parseTime } from "@/utils/common";

export default {
  components: {Pagination},
  data() {
    return {
      Status,
      searchAll: false,
      selection:[],
      searchModel:{
      },
      tableData: {
        records: [],
        total: 0,
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.search();
  },
  methods: {
    handleSelectionChange(selection){
      this.selection = selection;
    },
    handleSortChange(sort){
      if(sort.order=='ascending'){
        sort.order = 'asc';
      }else{
        sort.order = 'desc';
      }
      this.search(sort);
    },
    handleView(row) {
      this.$router.push({path: "auth-order-view",query:{id:row.id}});
    },
    handleDelete(row) {
      this.$confirm(`是否删除订单${row.orderNo}?`, "提示", {
        type: "warning"
      })
        .then(() => {
          const params = {
            id: row.id
          };
          deleteOrder(params).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success("删除订单成功");
              this.search();
            }
          });
        })
        .catch(() => {});
    },
    search(sort) {
      const params = {
        orderNo: this.searchModel.orderNo
      };
      if(this.searchModel.moneyStart){
        params.moneyStart = this.searchModel.moneyStart*100;
      }
      if(this.searchModel.moneyEnd){
        params.moneyEnd = this.searchModel.moneyEnd*100;
      }
      if(this.searchModel.createTime){
        params.createTimeStart = this.searchModel.createTime[0];
        params.createTimeEnd = this.searchModel.createTime[1];
      }
      if(sort){
        params.prop = sort.prop;
        params.order = sort.order;
      }
      pageOrder(params).then(res => {
        if (res.status == 200) {
          if (!res.data.success) {
            return this.$message.error(ApiError.msg(res.data.message));
          }
          const data = res.data.data;
          this.tableData.records = data.records;
          this.tableData.total = data.total;
          this.tableData.current = data.current;
          this.tableData.size = data.size;
        }
      });
    },
    resetSearch(){
      this.searchModel.orderNo = null;
      this.searchModel.moneyStart = null;
      this.searchModel.moneyEnd = null;
      this.searchModel.createTime = null;
    },
    moneyFormatter(row) {
      return row.money/100+'元';
    },
    statusFormatter(row) {
      return Status[row.status]['name'];
      // if(row.status==Status[0]){
      //   return "<p style='color: black'>禁用</p>";
      // }else if(row.status==Status[1]){
      //   return "<p style='color: red'>未支付</p>";
      // }else if(row.status==Status[2]){
      //   return "<p style='color: green'>已支付</p>";
      // }else if(row.status==Status[3]){
      //   return "<p style='color: yellow'>已取消</p>";
      // }else if(row.status==Status[4]){
      //   return "<p style='color: red'>已退款</p>";
      // }else if(row.status==Status[5]){
      //   return "<p style='color: black'>已超时</p>";
      // }
    },
    datetimeFormatter(row) {
      return parseTime(row["createTime"]);
    }
  }
}
</script>

<style lang="scss" scoped>
.form_title {
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
}
.form_content {
  font-size: 14px;
  padding-right: 16px;
}
.input_suffix {
  display: inline-block;
  padding: 0 6px;
}
.el-divider {
  margin: 6px 0 16px;
}
.add_new_batch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  height: 45px;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  color: #8c939d;
}
.batch_block {
  margin-top: 16px;
}
.batch_block:first-child {
  margin-top: 0;
}
@import "@/styles/full-form";
@import "@/styles/common-table";
</style>
